import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, DatePicker, Form, Input, message, Modal, Row, Select} from 'antd';
import SingleDragger from "../common/SingleDragger";
import {fileUpload} from '../../utils/commons';
import Constants from '../../utils/Constants';
import moment from 'moment'

const dateFormat = 'YYYY-MM-DD';
const FormItem = Form.Item;
const R = require("ramda");


const supplierDetail = Form.create()(class SupplierDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: false
        }
    }

    handleOpen = (disabled) => {
        this.setState({ open: true, disabled });
    }

    handleCancel = () => {
        this.setState({ open: false });
        this.refs.bizLicenceUrl.resetUpload();
        this.props.form.resetFields();
    }

    closeWin = () => {
        this.handleCancel();
        if (this.props.refreshList) this.props.refreshList();
    }

    handleConfirm = () => {
        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) return;
            values.id = this.props.supplier.dataSource && this.props.supplier.dataSource.id ? this.props.supplier.dataSource.id : null;
            values.begindate = R.isNil(values.begindate) || R.isEmpty(values.begindate) ? "" : values.begindate.format(dateFormat);
            values.enddate = R.isNil(values.enddate) || R.isEmpty(values.enddate) ? "" : values.enddate.format(dateFormat);
            values.bizLicenceUrl = this.refs.bizLicenceUrl.getUrl();
            if (this.refs.bizLicenceUrl.getFiles().length === 0 ) { message.error("营业执照不能为空！"); return; }
            if (!R.equals(R.pick(Object.keys(values), this.props.supplier.dataSource), values)) {
                this.props.dispatch({
                    type: R.isNil(values.id) ? 'supplier/addSupplier' : 'supplier/updateSupplier',
                    payload: {
                        ...values,
                        onSuccess: (id) => {
                            if (!this.refs.bizLicenceUrl.getUrl() && this.refs.bizLicenceUrl.getFiles().length > 0) { //此判断的意思是，附件更换过，从无到有或者从A到B
                                fileUpload({
                                    modules: Constants.SUPPLIER_MODULES[0],
                                    id: values.id ? values.id : id,
                                    data: this.refs.bizLicenceUrl.getFiles(),
                                    onSuccess: this.closeWin,
                                    onFail: this.closeWin
                                });
                            } else {
                                this.closeWin()
                            }
                        }
                    }
                })
            } else this.handleCancel();
        });
    }

    render() {
        let dataSource = this.props.supplier.dataSource ? this.props.supplier.dataSource : {};
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } };
        let formItemLayout2 = { labelCol: { span: 4 }, wrapperCol: { span: 18 } };
        const { getFieldDecorator } = this.props.form;
        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];

        let transport =
            <div>
                <Col span={12}>
                    <FormItem {...formItemLayout} label="运输类型" hasFeedback>
                        {getFieldDecorator('transportType', {
                            rules: [{
                                required: true, message: '请输入运输类型',
                            }],
                            initialValue: R.isEmpty(dataSource.transportType) || R.isNil(dataSource.transportType) ? "1" : dataSource.transportType
                        })(
                            <Select disabled={this.state.disabled}>
                                <Select.Option value="1">海运整柜</Select.Option>
                                <Select.Option value="2">海运拼柜</Select.Option>
                                <Select.Option value="3">空运</Select.Option>
                                <Select.Option value="4">快递</Select.Option>
                            </Select>
                            )}
                    </FormItem>
                </Col>
            </div>

        let bizLicenceUrl = dataSource.bizLicenceUrl ? dataSource.bizLicenceUrl : undefined;

        let supplierCodeStatus = (R.isNil(this.props.supplier.dataSource.id) ? false : true);
        return (
            <Modal maskClosable={false} visible={this.state.open} width={850} title={"供应商详情"} confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="供应商代码" hasFeedback>
                                {getFieldDecorator('supplierCode', {
                                    rules: [{
                                        required: true, message: '请输入供应商代码',
                                    }],
                                    initialValue: dataSource.supplierCode
                                })(
                                    <Input disabled={supplierCodeStatus} maxLength="20" />
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="公司联系人" hasFeedback>
                                {getFieldDecorator('contactor', {
                                    rules: [{
                                        required: true, message: '请输入公司联系人',
                                    }],
                                    initialValue: dataSource.contactor
                                })(
                                    <Input disabled={this.state.disabled} maxLength="100" />
                                    )}
                            </FormItem>
                        </Col>

                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="联系方式类型" hasFeedback>
                                {getFieldDecorator('contactWay', {
                                    rules: [{
                                        required: true, message: '请输入联系方式类型',
                                    }],
                                    initialValue: dataSource.contactWay
                                })(
                                    <Select disabled={this.state.disabled}>
                                        <Select.Option value="1">移动电话</Select.Option>
                                        <Select.Option value="2">固定电话</Select.Option>
                                        <Select.Option value="3">QQ</Select.Option>
                                        <Select.Option value="4">微信</Select.Option>
                                    </Select>
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="联系内容" hasFeedback>
                                {getFieldDecorator('contactContent', {
                                    rules: [{
                                        required: true, message: '请输入联系内容',
                                    }],
                                    initialValue: dataSource.contactContent
                                })(
                                    <Input disabled={this.state.disabled} maxLength="30" />
                                    )}
                            </FormItem>
                        </Col>

                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="公司名称" hasFeedback>
                                {getFieldDecorator('companyname', {
                                    rules: [{
                                        required: true, message: '请输入公司名称',
                                    }],
                                    initialValue: dataSource.companyname
                                })(
                                    <Input disabled={this.state.disabled} maxLength="100" />
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="公司英文名称" hasFeedback>
                                {getFieldDecorator('companynameEn', {
                                    rules: [{
                                        required: false, message: '请输入公司英文名称',
                                    }],
                                    initialValue: dataSource.companynameEn
                                })(
                                    <Input disabled={this.state.disabled} maxLength="200" />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="供应商类型" hasFeedback>
                                {getFieldDecorator('supplierType', {
                                    rules: [{
                                        required: true, message: '请至少选择一种供应商类型',
                                    }],
                                    initialValue: R.isNil(dataSource.supplierType) || R.isEmpty(dataSource.supplierType) ? undefined : dataSource.supplierType.split(',')
                                })(
                                    <Select disabled={this.state.disabled} mode="multiple">
                                        <Select.Option value="1">海运供应商</Select.Option>
                                        <Select.Option value="2">拖车供应商</Select.Option>
                                        <Select.Option value="3">报关供应商</Select.Option>
                                        <Select.Option value="4">空运供应商</Select.Option>
                                        <Select.Option value="5">快递供应商</Select.Option>
                                        <Select.Option value="6">保险供应商</Select.Option>
                                        <Select.Option value="7">仓库供应商</Select.Option>
                                        <Select.Option value="8">商检供应商</Select.Option>
                                        <Select.Option value="9">产地证供应商</Select.Option>
                                    </Select>
                                    )}
                            </FormItem>
                        </Col>
                        {this.props.form.getFieldValue("supplierType") && this.props.form.getFieldValue("supplierType").includes("1") ?
                            transport
                            : ""
                        }
                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="等级" hasFeedback>
                                {getFieldDecorator('level', {
                                    rules: [{
                                        required: true, message: '请输入等级',
                                    }],
                                    initialValue: R.isEmpty(dataSource.level) || R.isNil(dataSource.level) ? "A" : dataSource.level
                                })(
                                    <Select disabled={this.state.disabled}>
                                        <Select.Option value="A">优质</Select.Option>
                                        <Select.Option value="B">良好</Select.Option>
                                        <Select.Option value="C">普通</Select.Option>
                                        <Select.Option value="D">差</Select.Option>
                                    </Select>
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="历史等级" hasFeedback>
                                {getFieldDecorator('historyLevel', {
                                    rules: [{
                                        required: false, message: '历史等级',
                                    }],
                                    initialValue: dataSource.historyLevel
                                })(
                                    <Select disabled={this.state.disabled}>
                                        <Select.Option value="A">优质</Select.Option>
                                        <Select.Option value="B">良好</Select.Option>
                                        <Select.Option value="C">普通</Select.Option>
                                        <Select.Option value="D">差</Select.Option>
                                    </Select>
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="合作开始时间" hasFeedback>
                                {getFieldDecorator('begindate', {
                                    rules: [{
                                        required: false, message: '请输入合作开始时间',
                                    }],
                                    initialValue: (R.isNil(dataSource.begindate) || R.isEmpty(dataSource.begindate)) ? undefined : moment(dataSource.begindate, dateFormat)
                                })(
                                    <DatePicker
                                        disabled={this.state.disabled}
                                        style={{ width: '100%' }}
                                        showTime={{ format: 'YYYY-MM-DD' }}
                                        format="YYYY-MM-DD"
                                        placeholder="请选择时间"
                                    />
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="合作结束时间" hasFeedback>
                                {getFieldDecorator('enddate', {
                                    rules: [{
                                        required: false, message: '请输入合作结束时间',
                                    }],
                                    initialValue: (R.isNil(dataSource.enddate) || R.isEmpty(dataSource.enddate)) ? undefined : moment(dataSource.enddate, dateFormat)
                                })(
                                    <DatePicker
                                        disabled={this.state.disabled}
                                        style={{ width: '100%' }}
                                        showTime={{ format: 'YYYY-MM-DD' }}
                                        format="YYYY-MM-DD"
                                        placeholder="请选择时间"
                                    />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <FormItem {...formItemLayout2} label="公司地址" hasFeedback>
                                {getFieldDecorator('address', {
                                    rules: [{
                                        required: false, message: '请输入公司地址',
                                    }],
                                    initialValue: dataSource.address
                                })(
                                    <Input.TextArea disabled={this.state.disabled} maxLength="300" autosize={true} />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <FormItem {...formItemLayout2} label="备注" hasFeedback>
                                {getFieldDecorator('memo', {
                                    rules: [{
                                        required: false, message: '请输入备注',
                                    }],
                                    initialValue: dataSource.memo
                                })(
                                    <Input.TextArea disabled={this.state.disabled} maxLength="500" autosize={true} />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">营业执照</span>} hasFeedback>
                                <SingleDragger url={bizLicenceUrl} ref="bizLicenceUrl" dataSource={dataSource} module={Constants.SUPPLIER_MODULES[0]} disabled={this.state.disabled} />
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.supplier, supplier: state.supplier
    };
}

export default connect(mapStateToProps)(supplierDetail);